<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center balanceRecharge_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub balanceRecharge_fd0_0'>
					<view class='flex flex-wrap align-center balanceRecharge_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">
						<text class='fu-iconfont2  balanceRecharge_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='balanceRecharge_fd0_0_c1_c0'>充值</text>
					</view>
					<view class='flex flex-wrap align-center justify-end balanceRecharge_fd0_0_c0'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout balanceRecharge_flex_1">
				<view class='flex flex-direction flex-wrap align-stretch balanceRecharge_fd1_0'>
					<view class='flex flex-wrap align-center' @click="popupShow1709275477283=true">
						<text class='balanceRecharge_fd1_0_c0_c0'>自定义输入金额</text>
						<image class='balanceRecharge_fd1_0_c0_c1' mode="aspectFit" src='https://paiaifalv.oss-cn-beijing.aliyuncs.com/images/42.png'></image>
					</view>
					<view class='flex flex-wrap align-center balanceRecharge_fd1_0_c1'>
						<text class='balanceRecharge_fd1_0_c1_c0'>￥</text>
						<input type="number" maxlength="6" @input="changenumber" placeholder="请输入充值金额" v-model="moneynumber" />
					</view>
				</view>
				<view class='flex flex-wrap align-center balanceRecharge_fd1_0_c0_c0'>
					<text class='balanceRecharge_fd1_1_c0'>可到账</text>
					<view class='flex flex-wrap align-center'>
						<text class='balanceRecharge_fd1_1_c1_c0'>{{fadoutotal}}</text>
					</view>
					<view class='flex flex-wrap align-center'>
						<text>法豆</text>
					</view>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-center benben-flex-layout">
				<view class='flex flex-wrap align-center justify-center balanceRecharge_fd2_0' @click="topUpPriceFunc">
					<text class='balanceRecharge_fd2_0_c0'>充值</text>
				</view>
				<view class='flex flex-wrap align-center justify-center balanceRecharge_fd2_1' @click="chongzhijilu">
					<text class='balanceRecharge_fd2_1_c0'>充值记录</text>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<benben-popup v-model="popupShow1709275477283" :mask="true" :mask-close-able="false" mode='center'>
				<!---钱包说明flex布局开始-->
				<view class="flex flex-direction flex-wrap align-center benben-flex-layout">
					<view class='flex flex-direction flex-wrap align-center balanceRecharge_fd3_0'>
						<text class='balanceRecharge_fd3_0_c0'>充值规则</text>
						<scroll-view class='balanceRecharge_fd3_0_c1' :scroll-y='true'>
							<view class='flex benben-scroll flex align-center'>
								<!-- <jyf-parser class='balanceRecharge_fd3_0_c1_c0' :html="NoticeInfo.content | richTextFormat">
								</jyf-parser> -->
								<rich-text :nodes="NoticeInfo.content"></rich-text>
							</view>
						</scroll-view>
					</view>
					<image class='balanceRecharge_fd3_1' mode="aspectFit" src='https://paiaifalv.oss-cn-beijing.aliyuncs.com/images/43.png' @click="popupShow1709275477283=false"></image>
				</view>
				<!---钱包说明flex布局结束-->
			</benben-popup>
		</view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"popupShow1709275477283": false,
				"payable_money": "",
				"walletMessage": {
					"order_sn": "",
					"payable_money": ""
				},
				NoticeInfo:"",
				moneynumber:"",
				bilinumber:0,//比例
				fadoutotal:0,//法豆总额
				order_sn:"",//订单号
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			this.post641568f1b6f87();
			this.get_config();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//获取充值规则
			post641568f1b6f87(){
				this.$api.post(global.apiUrls.post641568f1b6f87, {
					column_id:"23"
				}).then(res=>{
					if(res.data.code==1){
						this.NoticeInfo = res.data.data;
					}
				})
			},
			
			//获取比例
			get_config(){
				this.$api.post(global.apiUrls.get_config, {
					code:"duihuan_count"
				}).then(res=>{
					if(res.data.code==1){
						this.bilinumber = res.data.data.duihuan_count;
					}
				})
			},
			
			changenumber(){
				this.fadoutotal = Number(this.moneynumber) * Number(this.bilinumber);
				console.log(this.fadoutotal,this.moneynumber,this.bilinumber)
			},
			
			//充值金额
			topUpPriceFunc() {
				let _this = this;
				if(this.moneynumber==""){
					this.$message.info("请输入充值金额");
					return
				}
				this.$api.post(global.apiUrls.set_userrechargeorder, {
					order_money:this.moneynumber,
				}).then(res=>{
					if(res.data.code==1){
						this.order_sn = res.data.data.order_sn;
						this.get_wxpay();
					}else{
						this.$message.info(res.data.msg)
					}
				})
			},
			
			//支付
			get_wxpay(){
				let _this = this;
				uni.login({
					provider: "weixin",
					success: (res) => {
						let xcxcode = "";
						xcxcode = res.code;
						this.$api.post(global.apiUrls.get_wxpay, {
							order_sn: this.order_sn,
							wxpaytype: "MiniPay",
							ismini: 0,
							code: xcxcode,
							// #ifdef MP-WEIXIN
							ismini: 1,
							// #endif
						}).then(res => {
							console.log("微信支付回调", res);
							if (res.data.code == 1) {
								let data = res.data.data;
								console.log('支付信息', data);
								uni.requestPayment({
									provider: 'wxpay',
									// #ifdef MP-WEIXIN
									timeStamp: data.timeStamp,
									nonceStr: data.nonceStr,
									package: data.package,
									signType: data.signType || '',
									paySign: data.paySign,
									// #endif
									// #ifdef APP-PLUS
									orderInfo: data,
									// #endif
									success: (e) => {
										console.log('success', e)
										if (e.errMsg == 'requestPayment:ok') {
											uni.navigateBack()
										}
									},
									fail: (e) => {
										console.log('fail', e);
										// #ifdef APP-PLUS
										let failMsg = 'requestPayment:fail canceled';
										// #endif
										// #ifndef APP-PLUS
										let failMsg = 'requestPayment:fail cancel';
										// #endif
										if (e.errMsg == failMsg) {
											_this.$message.info('取消支付');
										} else {
											_this.$message.info("支付失败,请稍后重试");
											// this.$message.info("支付失败,原因为: " + e.errMsg);
										}
									},
									complete: () => {
										_this.loading = false;
									}
								});
							} else {
								_this.loading = false;
								_this.$message.info("订单无效，支付失败!");
							}
						}).catch(err => {
							_this.loading = false;
							console.error('微信支付失败 =>', err);
						})
					}
				})
			},
			
			//跳转充值记录
			chongzhijilu(){
				uni.navigateTo({
					url:"/pages/qbgl/chongzhijilu/chongzhijilu"
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #eee;
		background-size: 100% auto;
	}

	.balanceRecharge_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.balanceRecharge_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.balanceRecharge_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.balanceRecharge_fd0_0_c0 {
		width: 120rpx;
	}

	.balanceRecharge_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.balanceRecharge_flex_1 {
		background: rgba(255, 255, 255, 1);
		background-size: 100% auto !important;
		padding: 0rpx 0rpx 24rpx 0rpx;
	}

	.balanceRecharge_fd1_1_c1_c0 {
		color: rgba(220, 48, 48, 1);
	}

	.balanceRecharge_fd1_1_c0 {
		padding: 0rpx 0rpx 0rpx 20rpx;
	}

	.balanceRecharge_fd1_0_c1_c0 {
		color: #333;
		font-size: 44rpx;
		margin: 0rpx 24rpx 0rpx 0rpx;
	}

	.balanceRecharge_fd1_0_c1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.balanceRecharge_fd1_0_c0_c1 {
		width: 22rpx;
		height: 22rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 0rpx 0rpx 12rpx;
	}

	.balanceRecharge_fd1_0_c0_c0 {
		color: #333333;
		font-size: 28rpx;
		font-weight: 400;
	}

	.balanceRecharge_fd1_0 {
		border-bottom: 1px solid #eee;
		margin: 0rpx 32rpx 32rpx 32rpx;
		padding: 24rpx 0rpx 24rpx 0rpx;
	}

	.balanceRecharge_fd2_1_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
	}

	.balanceRecharge_fd2_1 {
		border: 1px solid #DEDEDE;
		background: #FFFFFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		width: 710rpx;
		height: 98rpx;
		margin: 36rpx 0rpx 0rpx 0rpx;
	}

	.balanceRecharge_fd2_0_c0 {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 400;
	}

	.balanceRecharge_fd2_0 {
		background: #26BF01;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		width: 710rpx;
		height: 98rpx;
		margin: 50rpx 0rpx 0rpx 0rpx;
	}

	.balanceRecharge_fd3_1 {
		width: 56rpx;
		height: 56rpx;
		margin: 48rpx 0rpx 0rpx 0rpx;
	}

	.balanceRecharge_fd3_0_c1_c0 {
		color: #333333;
		font-size: 28rpx;
		font-weight: 400;
	}

	.balanceRecharge_fd3_0_c1 {
		touch-action: none;
		width: 482rpx;
		height: 458rpx;
	}

	.balanceRecharge_fd3_0_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
		margin: 40rpx 0rpx 30rpx 0rpx;
	}

	.balanceRecharge_fd3_0 {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		width: 540rpx;
		padding: 0rpx 0rpx 40rpx 0rpx;
	}
</style>